<template>
  <view class="container">
    <image src="../static/images/headerbgc.png" class="headerbgc"></image>
    <!-- 头部组件 -->
    <headerCom class="headerCom" :city="currentcity"></headerCom>
    <!-- 轮播图区域 -->
    <swiper :indicator-dots="true" :autoplay="true" :interval="3000" :duration="2000" class="home-image">
      <swiper-item v-for="item in swiperlist" :key="item.id" @click="godetail(item)">
        <image :src="item.img" mode="aspectFill" style="width: 702rpx; height: 320rpx"></image>
      </swiper-item>
    </swiper>
    <!-- 宫格区域 -->
    <view class="gridcontent">
      <view class="griditem" @click="gotypelist">
        <image src="/sub_shop/static/images/hufu.png" class="gridimage"></image>
        <view class="gridtext">全部分类</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/shuiguo.png" class="gridimage"></image>
        <view class="gridtext">蔬果生鲜</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/foods.png" class="gridimage"></image>
        <view class="gridtext">Digital home appliances</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/xiaodu.png" class="gridimage"></image>
        <view class="gridtext">口罩消毒</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/personalclear.png" class="gridimage"></image>
        <view class="gridtext">个人清洁</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/hometool.png" class="gridimage"></image>
        <view class="gridtext">Digital home appliances</view>
      </view>
      <view class="griditem">
        <image src="/sub_shop/static/images/sontool.png" class="gridimage"></image>
        <view class="gridtext">母婴用品</view>
      </view>

      <view class="griditem">
        <image src="/sub_shop/static/images/cleartool.png" class="gridimage"></image>
        <view class="gridtext">护理工具</view>
      </view>
    </view>
    <!--商品模块 -->
    <view class="goods">
      <view class="goodsitem" v-for="item in goodslist" :key="item.id">
        <image src="../../static/image/download/code.png" mode="" class="goodsitemimage"></image>
        <view class="goodsinfo">
          <view class="goodsname singe-line">{{ item.title }}</view>
          <view>
            <text style="font-size: 22rpx; color: red">￥</text>
            <text style="font-size: 32rpx; color: red">4688.00</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 底部组件 -->
    <footerCom style="position: fixed; bottom: 0" @goOtherPage="gopages"></footerCom>
    <!-- 解决固定定位的覆盖问题 -->
    <view style="position: relative; bottom: 0; width: 750rpx; height: 98rpx"></view>
  </view>
</template>

<script>
import headerCom from '@/components/headersearch/headersearch.vue';
import footerCom from '@/components/shopfooter/shopfooter.vue';
import { getshophomeswiper, category } from '@/services/shop.js';
import { goodslist } from '@/services/goods.js';
export default {
  components: {
    headerCom,
    footerCom
  },
  onLoad(value) {
    this.currentcity = value.city;
    // 获取商城主页的轮播图
    this.getswiperlist();
    //  获取商城类目列表
    this.getcategory();
    // 获取商品列表
    this.getgoodslist();
  },
  data() {
    return {
      currentcity: '', // 选择的当前城市
      swiperlist: [], // 轮播图列表
      goodslist: [] // 商品列表
    };
  },
  methods: {
    // 获取商品列表
    async getgoodslist() {
      const res = await goodslist();
      console.log('商品列表----------', res);
      this.goodslist.unshift(res.result.rows[0], res.result.rows[1], res.result.rows[2], res.result.rows[3]);
      console.log('商品列表2222----------', this.goodslist);
    },
    // 跳转到全部分类
    gotypelist() {
      uni.navigateTo({
        url: '/sub_goodstype/allcategories/allcategories'
      });
    },
    // 接受子组件的路径
    gopages(value) {
      uni.switchTab({
        url: value
      });
    },
    // 获取商城轮播图列表
    async getswiperlist() {
      const res = await getshophomeswiper();
      this.swiperlist = res.result.rows;
    },
    // 点击轮播图跳转到详情
    godetail(item) {
      // console.log('录轮播图详情------', item);
      uni.navigateTo({
        url: '/sub_shop/swiperdetail/swiperdetail?swiperid=' + item.id
      });
    },
    // 获取商城类目
    async getcategory() {
      const res = await category();
      console.log('类目列表----', res);
    }
  }
};
</script>

<style lang="less" scoped>
.container {
  box-sizing: border-box;
  .headerbgc {
    position: relative;
    width: 750rpx;
    height: 400rpx;
    top: 0;
    left: 0;
  }
  .headerCom {
    position: absolute;
    top: 0;
    left: 0;
  }
  .home-image {
    position: absolute;
    top: 100rpx;
    left: 20rpx;
    width: 706rpx;
    height: 320rpx;
  }
  .gridcontent {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    .griditem {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: center;
      width: 25%;
      height: 200rpx;
      // margin-left: 40rpx;
      // margin-right: 20rpx;
      margin-top: 48rpx;
      .gridimage {
        width: 120rpx;
        height: 120rpx;
      }
      .gridtext {
        font-size: 28rpx;
        text-align: center;
      }
    }
  }
  .goods {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    .goodsitem {
      width: 340rpx;
      height: 460rpx;
      margin-left: 26rpx;
      margin-bottom: 20rpx;
      .goodsitemimage {
        width: 340rpx;
        height: 340rpx;
      }
      .goodsinfo {
        width: 340rpx;
        height: 120rpx;
        .goodsname {
          font-size: 28rpx;
        }
        .singe-line {
          text-overflow: ellipsis;
          overflow: hidden;
          word-break: break-all;
          white-space: nowrap;
        }
      }
    }
  }
}
</style>
